<template>
	<view>
		<view style="background: url(https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20230411/e63bcf73858e37c567847ca55821ddfa.png) no-repeat;background-size: 100%;width: 100%;height: 414rpx;">

		</view>
		<view style="width: 94%;position: absolute;top:10rpx;left: 3%;padding-bottom: 30rpx;">
			<u-swiper
			            :list="xq.main_image"
						height="150"
						radius="10"
			            indicator
			            indicatorMode="line"
			            circular
			    ></u-swiper>
			<view style="margin-top: 26rpx;">
				<view style="background-color: #FFFFFF;padding: 30rpx;border-radius: 14rpx;">
					<view style="overflow: hidden;position: relative;">
						<view style="width: 100%;padding-right: 200rpx;box-sizing: border-box;">
							<view style="line-height: 50rpx;color: #000000;font-size: 36rpx;font-weight: 600;">
								{{xq.name || ''}}
							</view>
							<view style="line-height: 30rpx;color: #999999;font-size: 22rpx;margin: 10rpx 0 30rpx;">
								{{xq.address || ''}}
							</view>
						</view>
						<!-- <image  style="width: 90rpx;height: 90rpx;display: block;position: absolute;top: 0;right: 0;" src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20230608/6fb2409f62c32cac96eb46aefa1584b7.png" mode=""></image> -->
						<view v-if="xq.bazaar_status==2" @click="gundong" style="color:#fff;font-size: 24rpx;background-color: #1fb0ac;height: 50rpx;line-height: 50rpx;text-align: center;border-radius: 26rpx;width: 150rpx;position: absolute;top: 0;right: 0;">
							入驻此市场
						</view>
						<view v-if="xq.bazaar_status==1"  style="color:#fff;font-size: 24rpx;background-color: #1fb0ac;height: 50rpx;line-height: 50rpx;text-align: center;border-radius: 26rpx;width: 150rpx;position: absolute;top: 0;right: 0;">
							已入驻
						</view>
					</view>
					<view style="line-height: 30rpx;color: #999999;font-size: 24rpx;margin-bottom: 30rpx;">
						市场介绍：{{xq.desc || '暂无信息'}}
					</view>
					<view style="line-height: 30rpx;color: #999999;font-size: 24rpx;">
						主营：{{xq.manage || '暂无信息'}}
					</view>
				</view>
			</view>
			<!-- <view class="fenlei">
				<view  @click="scqiye(index,item.id)" style="width: 20%;text-align: center;float: left;margin-bottom: 30rpx;" v-for="(item,index) in fl_list" :key='index'>
					<image :src="item.main_image" style="width: 70rpx;height: 70rpx;" mode=""></image>
					<view style="font-size: 24rpx;color: #000000;line-height: 30rpx;">
						{{item.name}}
					</view>
				</view>

			</view> -->
			<view class="fenlei">
				<view style="overflow: hidden;padding: 20rpx 0 0;">
					<view v-for="(item, index) in fl_list" :key='index' @click="scqiye(index,item.id)" style="text-align: center;width: 20%;float: left;margin-bottom: 20rpx;">
						<image :src="item.main_image" style="width: 60rpx;height: 60rpx;" mode=""></image>
						<view style="font-size: 24rpx;color: #000000;line-height: 30rpx;">
							{{item.name}}
						</view>
					</view>
				</view>
				<!-- <swiper :indicator-dots="fl_xianshi" style="height: 320rpx;" class="swiper">
				    <swiper-item >

							 <u-grid :border="false" >
							     <u-grid-item @click="scqiye(index,item.id)"
							             :customStyle="{width:138+'rpx',height:138+'rpx'}"
							             v-for="(item, index) in fl_list.slice(0,10)"
							             :index="index"
							             :key="index"
							     >
							         <image :src="item.main_image" style="width: 80rpx;height: 80rpx;" mode=""></image>
							         <view style="font-size: 24rpx;color: #000000;margin-top: 10rpx;">
							         	{{item.name}}
							         </view>
							     </u-grid-item>
							 </u-grid>
				    </swiper-item>
				    <swiper-item v-if="fl_list.length>10" >
				          <u-grid :border="false" >
				              <u-grid-item @click="scqiye(index+10,item.id)"
				                      :customStyle="{width:138+'rpx',height:138+'rpx'}"
				                      v-for="(item, index) in fl_list.slice(10,20)"
				                      :index="index"
				                      :key="index"
				              >
				                  <image :src="item.main_image" style="width: 80rpx;height: 80rpx;" mode=""></image>
				                  <view style="font-size: 24rpx;color: #000000;margin-top: 10rpx;">
				                  	{{item.name}}
				                  </view>
				              </u-grid-item>
				          </u-grid>
				    </swiper-item>
				   <swiper-item v-if="fl_list.length>20" >
				           <u-grid :border="false" >
				               <u-grid-item @click="scqiye(index+20,item.id)"
				                       :customStyle="{width:138+'rpx',height:138+'rpx'}"
				                       v-for="(item, index) in fl_list.slice(10,30)"
				                       :index="index"
				                       :key="index"
				               >
				                   <image :src="item.main_image" style="width: 80rpx;height: 80rpx;" mode=""></image>
				                   <view style="font-size: 24rpx;color: #000000;margin-top: 10rpx;">
				                   	{{item.name}}
				                   </view>
				               </u-grid-item>
				           </u-grid>
				    </swiper-item>
				</swiper> -->

			</view>
			<view style="width:100%;margin: 26rpx auto;overflow: hidden;">
				<view style="width: 25%;float: left;"  @click="qi_huo(1)" :class="qh_type==1?'tui_active':'tui_mei'">
					全部门店
				</view>
				<!-- <view style="width: 25%;float: left;text-align: center;" @click="qi_huo(2)" :class="qh_type==2?'tui_active':'tui_mei'">
					{{qihuo5 || '类型'}}<text class="iconfont icon-xiangxia" style="font-size: 22rpx;"></text>
				</view> -->
			</view>

			<view @click="qyxq(item.id,item.special_manage,item.name)" style="box-sizing: border-box;padding: 30rpx 30rpx 0;background-color: #FFFFFF;margin-top: 26rpx;border-radius: 16rpx;" v-for="(item,index) in list" :key='index'>
				<view style="overflow: hidden;">
					<view style="width: 35%;float: left;position: relative;">
						<image :src="item.logo_image"
							style="width: 190rpx;height: 190rpx;display: block;border-radius: 20rpx;"
							mode=""></image>
						<!-- <text
							style="color: #AF7300;font-size: 22rpx;padding: 6rpx 20rpx;background-color: #EFE0C3;position: absolute;top: 0;left: 0;border-top-left-radius: 10rpx;">
							{{item.client_position_text}}
						</text> -->
					</view>
					<view style="width: 65%;float: left;padding: 6rpx 0;">
						<view style="line-height: 40rpx;color: #010101;font-size: 32rpx;margin: 10rpx 0;"
							class="yihang">
							{{item.name}}
						</view>
						<view style="line-height: 40rpx;color: #010101;font-size: 32rpx;margin: 10rpx 0;overflow: hidden;">
							<text v-for="(a,b) in item.client_position_arr" :key='b' style="background: linear-gradient(0deg, #1fb0ac 0%, #5EC4C2 100%);border-radius: 6rpx;color: #FEFEFE;font-size: 22rpx;padding: 0rpx 10rpx;float: left;margin-right: 10rpx;margin-bottom: 10rpx;">
								{{a.title || ''}}
							</text>
						</view>
						<view style="line-height: 30rpx;color: #999999;font-size: 22rpx;margin: 10rpx 0 20rpx;"
							class="yihang">
							主营：{{item.manage || '暂无主营'}}
						</view>
						<view style="line-height: 30rpx;color: #999999;font-size: 22rpx;" class="erhang">
							<!-- <text class="iconfont icon-dizhi2"
								style="color: #909193;font-size: 24rpx;"></text> -->
							入驻市场：
							<text v-if="item.bazaar.length>0" v-for="(a,b) in item.bazaar" style="margin-left: 6rpx;" :key='index'>
								{{a.name}}
							</text>
							<text v-if="item.bazaar.length<=0">
								暂无市场
							</text>
						</view>
					</view>
				</view>
				<view style="display: flex;text-align: center;color: #999999;font-size: 22rpx;line-height: 100rpx;">
					<view style="flex: 1;">
						浏览量：{{item.views_num || 0}}
					</view>
					<view style="flex: 1;">
						关注数：{{item.attention_num || 0}}人
					</view>
					<view style="flex: 1;">
						联系次数：{{item.contact_num || 0}}次
					</view>
				</view>
			</view>
			<view v-if="kk" style="text-align: center;">
				<image src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20220329/e86889a9b8fd67d8950e4775d67316c.png" style="width: 400rpx;" mode="widthFix"></image>
			</view>
			<u-divider color='#717171' bg-color='#f0f2f8' height='80' border-color='#717171' text="暂无数据" v-if="list.length==0"></u-divider>
			<u-divider color='#717171' bg-color='#f0f2f8' height='80' border-color='#717171' text="没有更多了" v-if="list.length>0 && enmpy"></u-divider>
		</view>
		<lb-picker ref="picker5" v-model="qihuo5" mode="selector" :dataset="{ name: qihuo5 }" :list="list_arr5"
			@confirm="handleConfirm5">
		</lb-picker>


		<!-- <image @click="gundong" src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20220614/05d36eb46b7aee9b630c877fa4d6c288.png"
			style="width:120rpx;height:120rpx;position: fixed;right: 10rpx;bottom: 300rpx;z-index: 400;" mode=""></image> -->

		<uni-popup id="popup" ref="popup" :type="type_status" :animation="true">
			<view class="" style="background-color: #FFFFFF;padding:20upx 30upx 0;border-radius: 20upx;width: 500rpx;">
				<view
					style="text-align: center;height: 100upx;line-height: 100upx;color: #333333;font-weight: 600;font-size: 32rpx;">
					提示
				</view>
				<view class="popup-content" style="text-align: center;font-size: 28upx;">请授权您的用户信息</view>
				<view class="footer">
					<button @click="quxiao"
						style="flex: 1;background-color: #f3f3f3;color: #333333;margin-right: 20rpx;font-weight: 600;"
						type="default">取消</button>
					<button @click="login" lang="zh_CN" style="flex: 1;background-color: #000000;color: #FFFFFF;"
						open-type="getUserInfo">确定</button>
					<!-- <button @click="submitLink" type="default" class="submit">确认提交</button> -->
				</view>
			</view>
		</uni-popup>
    <noLoginToast ref="noLoginToast" />
	</view>
</template>

<script>
	import LbPicker from '@/components/lb-picker'
	export default{
		components: {
			LbPicker
		},
		data(){
			return{
				fl_xianshi:false,
				list3: [
				        'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				         'https://cdn.uviewui.com/uview/swiper/swiper2.png',
				          'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				       ],
				qh_type:1,
				fl_list:[],
				id:'',
				xq:{},
				yuan_list_arr5:[],
				list_arr5:[],
				qihuo5:'',
				value:'',

				page:1,
				list:[],
				enmpy:false,
				kk:false,
				type_status:'center'
			}
		},
		onLoad(option) {
			this.id=option.id
			this.schy_fl()
			this.sc_xq()
			this.leixing_list()
			this.lebiao()
		},
		onReachBottom: function() {
			if (this.enmpy) {
				return
			} else {
				this.lebiao()
			}
		},
		methods:{
			// 入驻市场
			async gundong(){
				let that=this
				let isLogin = await this.$refs.noLoginToast.open()
				if (isLogin) {
					let isHasMobile = await this.$refs.noLoginToast.getPhoneNumber()
					if (!isHasMobile) {
						return
					}
				} else {
					return
				}
					// uni.navigateTo({
					// 	url:'../../../subpages/pages/sc_rz?sc_id='+this.id+'&name='+this.xq.name
					// })
				uni.showModal({
					title: '提示',
					content: '确定入驻该市场吗',
					success: function (res) {
						if (res.confirm) {
							that.post('api/bazaar/apply',{bazaar_id:that.id},true).then(res=>{
								uni.showToast({
									title: res.msg,
									icon: "none",
									duration: 1000
								})
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			async scqiye(index,id){
				let isLogin = await this.$refs.noLoginToast.open()
				if (isLogin) {
					let isHasMobile = await this.$refs.noLoginToast.getPhoneNumber()
					if (!isHasMobile) {
						return
					}
				} else {
					return
				}
				uni.navigateTo({
					url:'../../../subpages/pages/sc_qiye?index='+index+'&id='+id+'&sc_id='+this.id
				})
			},
			leixing(){
				this.$refs['picker5'].show()
			},
			handleConfirm5(e) {
				let that=this
				let index=e.index[0] || e.index
				console.log(index,123456)
				this.value=this.yuan_list_arr5[index].value
				this.page=1
				this.list=[]
				this.enmpy=false
				this.kk=false
				this.lebiao()
			},
			qi_huo(index){
				this.qh_type=index
				if(index==2){
					this.$refs['picker5'].show()
				}
			},
			// 企业详情
			async qyxq(id,type,name){
				let isLogin = await this.$refs.noLoginToast.open()
				if (isLogin) {
					let isHasMobile = await this.$refs.noLoginToast.getPhoneNumber()
					if (!isHasMobile) {
						return
					}
				} else {
					return
				}
				if(type==1){
					uni.navigateTo({
						url: 'qyxq?id=' + id+'&name='+name
					})
				}else{
					uni.navigateTo({
						url:'/subpages/pages/wuliuqiye/wl_qyxq?id='+id+'&name='+name
					})
				}
					// uni.navigateTo({
					// 	url:'../../../subpages/pages/scqy_xq?id='+id
					// })
			},
			// 市场行业分类
			schy_fl(){
				this.post('api/bazaar/category','',true).then(res=>{
					// console.log(res)
					if(res.code==1){
						this.fl_list=res.data
						if(res.data.length>10){
							this.fl_xianshi=true
						}
					}
				})
			},
			// 获取市场详情
			sc_xq(){
				this.post('api/bazaar/info',{bazaar_id:this.id},true).then(res=>{
					console.log(res)
					if(res.code==1){
						this.xq=res.data
					}
				})
			},
			// 推荐类型列表
			leixing_list(){
				this.post('api/firm_data/get_type','',true).then(res=>{
					console.log(res)
					if(res.code==1){
						this.yuan_list_arr5=res.data
						for(let i=0;i<res.data.length;i++){
							this.list_arr5.push(res.data[i].title)
						}
					}
				})
			},
			// 企业列表
			lebiao(){
				let data={
					page:this.page,
					limit:10,
					bazaar_manage_id:'',
					bazaar_id:this.id
				}
				this.post('api/bazaar/shop',data,true).then(res=>{
					console.log(res)
					if(res.code==1){
						if(this.page==1){
							if (res.data.data== null || res.data.data.length == 0) {
								this.kk = true
								this.enmpy = true
								return
							} else if (res.data.data.length < 10) {
								this.enmpy = true
							}
						}else{
							if (res.data.data== null || res.data.data.length == 0) {
								this.enmpy = true
								return
							} else if (res.data.data.length < 10) {
								this.enmpy = true
							}
						}

						this.page++
						this.list.push(...res.data.data)
						console.log(this.list,123456789)
					}else{
						this.kk = true
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1000
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.footer {
		display: flex;
		justify-content: space-between;
		border-top: 1px solid #f4f4f4;
		margin-top: 30rpx;
		padding-bottom: 20rpx;

		button {
			margin: 0 auto;
			width: 100%;
			background-color: #19BE6B;
			// width: 200upx;
			border-radius: 10upx;
			font-size: $uni-font-size-sm;
			// padding: 22upx 34upx;
			height: 80upx;
			font-size: 30rpx;
			line-height: 80upx !important;
			// line-height: 1;
			color: #FFFFFF;
		}

		button:after {
			border: 0;
		}
	}
	page{
		background-color: #F8F8F8!important;
		padding-bottom: 150rpx;
		font-family: Demibold;
	}
	.tu>view {
		margin: 10rpx 0;
	}

	.tu>view:nth-child(3n+2) {
		margin: 10rpx 30rpx;
	}
	.fenlei{
		width: 100%;
		margin-top: 26rpx;
		// height: 350rpx;
		// background: url(https://dyeego.oss-cn-beijing.aliyuncs.com/uploads/20220325/dbfaf5dddb188c6274941398431f8080.png) no-repeat;
		// background-size: 100%;
		box-sizing: border-box;
		padding: 20rpx 0 10rpx;
		background-color: #FFFFFF;
		overflow: hidden;
		border-radius: 20rpx;
	}
	.tui_mei{
		color: #666666;
		font-size: 28rpx;
		font-weight: 500;
	}
	.tui_active{
		color: #000000;
		font-size: 28rpx;
		font-weight: 600;
	}
</style>
